<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html; charset=utf-8");
%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath %>">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Keywords" content="冬游,冬季旅游,冰雪旅游,冬季,旅游,冰雪" />
    <meta name="description" content="网页描述">
    <link rel="stylesheet" href="./WinterTourism/material/bootstrap-icons/bootstrap-icons.css" type="text/css">
    <!-- jQuery -->
    <script src="./WinterTourism/material/js/jquery-3.4.1.js" type="text/javascript"></script>
    <!-- Bootstrap JS -->
    <script src="./WinterTourism/material/js/bootstrap.bundle.js" type="text/javascript"></script>

    <link rel="stylesheet" href="./WinterTourism/material/editor_md/css/editormd.css" />
    <link rel="stylesheet" href="./WinterTourism/material/editor_md/css/style.css" />
    <script src="./WinterTourism/material/editor_md/editormd.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./WinterTourism/material/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="./WinterTourism/material/css/index.css" type="text/css">

    <style>
        .main {
            width: 80%;
            margin: 0 auto;
        }
    </style>
    <title>冬游网-冬季旅游攻略网站</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark p-2 mb-3">
    <a href="#" class="navbar-brand">LOGO</a>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
            <li class="nav-item"><a href="#" class="nav-link">旅情事记</a></li>
            <li class="nav-item"><a href="#" class="nav-link">新闻资讯</a></li>
        </ul>
    </div>
    <div class="d-inline ml-3">
        <ul class="navbar-nav">
            <li class=" nav-item navbar-text">登录时间:&nbsp;</li>
            <li class=" nav-item navbar-text mr-3">${sessionScope.nowTime}</li>
            <li class=" nav-item navbar-text">欢迎您:</li>
            <li class=" nav-item dropdown">
                <a class="nav-link  dropdown-toggle" data-toggle="dropdown" href="#">
                    ${sessionScope.login.username}
                </a>
                <ul class="dropdown-menu">
                    <%--<li><a href="#" class="dropdown-item-text"></a></li>--%>
                    <li><a href="#" class="dropdown-item">个人中心</a></li>
                    <li><a href="#" class="dropdown-item">文章管理</a></li>
                    <li class="dropdown-divider"></li>
                    <li><a href="logout" class="dropdown-item">退出登录</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <button id="DraftBox" class="btn btn-sm btn-outline-danger mr-3 px-3">保存草稿</button>
    <button id="saveBtn" class="btn btn-sm btn-danger px-3">上传文章</button>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

<!--中间-->
<div class="main">
    <div class="row">
        <div class="form-group input-group col-12">
            <div class="input-group-prepend">
                <span class="input-group-text">文章标题</span>
            </div>
            <input type="text" class="form-control" id="title">
        </div>
        <div class="col-sm-4">
            <div class="form-group input-group form-inline">
                <div class="input-group-prepend">
                    <span class="input-group-text">tags</span>
                </div>
                <input type="text" class="form-control" id="tags">
            </div>
        </div>
        <div class="form-group col-sm-4 col-6">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="customFile">
                <label class="custom-file-label" for="customFile"><i class="bi-image"></i>封面图片</label>
            </div>
        </div>
        <div class="form-group col-sm-4 col-6 mr-auto">
            <select class=" custom-select" id="selectcity">
                <option selected>文章类型</option>
                <option value="1">新闻资讯</option>
                <option value="2">旅游攻略</option>
            </select>
        </div>

    </div>
</div>
<div id="layout">
    <header>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <textarea style="display:none;" class="form-control" id="editormd" name="editormd"></textarea>
    </header>
    <div id="test-editormd">
        <textarea class="editormd-html-textarea" name="text" id="editormdData"></textarea>
    </div>
</div>

<script type="text/javascript">
    document.charset = "UTF-8";
    var testEditor;
    $(function() { //Editor初始化：
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            // theme : "dark",
            path: "./WinterTourism/material/editor_md/lib/", //依赖lib文件夹路径
            //这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单
            saveHTMLToTextarea: true, // 保存 HTML 到 Textarea，true表示转化为html格式的内容也同样提交到后台
            toolbarAutoFixed: true, //工具栏自动固定定位的开启与禁用
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "<%=basePath %>imageUpload",
        });
        $("#saveBtn").click(function () {
            var data = $("#editormdData").text();
            var type = $("#selectcity").val();
            var title = $("#title").val();
            var photo = $("#customFile").val();
            var tags = $("#tags").val();
            var utfData = encodeURIComponent(data);
            var state = 1;
            // alert(html);
            $.ajax({
                data:{'state':state,'data':utfData,'title':title,'photo':photo,'type':type,'tags':tags,'uid':'${sessionScope.login.uid}','uname':'${sessionScope.login.username}'},
                dataType:'text',
                type:'post',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                url:'<%=basePath %>saveData',
                success:function (msg) {
                    alert(msg);
                }
            })
        });
        $("#DraftBox").click(function () {
            var data = $("#editormdData").text();
            var type = $("#selectcity").val();
            var title = $("#title").val();
            var photo = $("#customFile").val();
            var tags = $("#tags").val();
            var utfData = encodeURIComponent(data);
            var state = 0;
            // alert(html);
            $.ajax({
                data:{'state':state,'data':utfData,'title':title,'photo':photo,'type':type,'tags':tags,'uid':'${sessionScope.login.uid}','uname':'${sessionScope.login.username}'},
                dataType:'text',
                type:'post',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                url:'<%=basePath %>saveData',
                success:function (msg) {
                    alert(msg);
                }
            })
        });
    });
</script>
<footer class="bg-dark py-3 mt-2">
    <div class="container justify-content-md-between  d-flex  align-items-baseline">
        <div class="col-md-8">
            <ul class="breadcrumb bg-dark">
                <li>
                    <h5 class="text-light">友情链接：</h5>
                </li>
                <li class="breadcrumb-item"><a href="http://www.hrbicesnow.com/" class="text-light">冰雪大世界</a>
                </li>
                <li class="breadcrumb-item"><a href="http://www.hrbwljt.cn/" class="text-light">哈尔滨文旅</a></li>
                <li class="breadcrumb-item"><a href="http://whhlyt.jl.gov.cn/" class="text-light">黑龙江文旅</a></li>
                <li class="breadcrumb-item"><a href="http://whhlyt.jl.gov.cn/" class="text-light">吉林文旅</a></li>
            </ul>
        </div>
        <div>
            <p class="text-white">
                <a class="fenge text-white" href="#home"><i class="bi bi-wechat"></i></a>
                <a class="fenge text-white" href="#home"><i class="bi bi-sina-weibo"></i></a>
                <a class="fenge text-white" href="#home"></i><i class="bi bi-tiktok"></i></a>
                <a class="fenge text-white" href="#home"><i class="bi bi-tencent-qq"></i></a>
            </p>
        </div>
    </div>
    <div class="navigation-bar text-center">
        <a class="fenge text-white" href="#home">首页</a>
        <a class="fenge text-white" href="#home">旅情事记</a>
        <a class="fenge text-white" href="#home">新闻资讯</a>
        <a class="fenge text-white" href="#aboutus">商家服务</a>
        <a class="fenge text-white" href="#aboutus">关于我们</a>
    </div>
    <hr class="bg-white" />
</footer>
</body>
</html>
